<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="21">
            <div class="postInfo-container">
              <el-row>
                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="请输入彩币编号" placement="top">
                    <el-form-item label-width="100px" label="彩币ID:" class="postInfo-container-item">
                      <el-input placeholder="请输入彩币编号" type="color" style='min-width:200px;' v-model="postForm.colorId">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>

                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="请输入@币" placement="top">
                    <el-form-item label-width="100px" label="@币:" class="postInfo-container-item">
                      <el-input placeholder="请输入@币" style='min-width:200px;' v-model="postForm.baseCoinType">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="请输入彩币中文名称" placement="top">
                    <el-form-item label-width="100px" label="彩币中文名称:" class="postInfo-container-item">
                      <el-input placeholder="请输入彩币中文名称" style='min-width:200px;' v-model="postForm.name">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>

                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="请输入彩币英文名称" placement="top">
                    <el-form-item label-width="100px" label="彩币英文名称:" class="postInfo-container-item">
                      <el-input placeholder="请输入彩币英文名称" style='min-width:200px;' v-model="postForm.ename">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="请输入彩币英文缩写" placement="top">
                    <el-form-item label-width="100px" label="彩币英文缩写:" class="postInfo-container-item">
                      <el-input placeholder="请输入彩币英文缩写" style='min-width:200px;' v-model="postForm.shortName">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>

                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="请输入发行主体" placement="top">
                    <el-form-item label-width="100px" label="发行主体:" class="postInfo-container-item">
                      <el-input placeholder="请输入发行主体" style='min-width:200px;' v-model="postForm.issuingSubject">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="请输入发行规模" placement="top">
                    <el-form-item label-width="100px" label="发行规模:" class="postInfo-container-item">
                      <el-input placeholder="请输入发行规模" style='min-width:200px;' v-model="postForm.baseAmount">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>

                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="请输入发行量" placement="top">
                    <el-form-item label-width="100px" label="发行量:" class="postInfo-container-item">
                      <el-input placeholder="请输入发行量" style='min-width:200px;' v-model="postForm.totalAmount">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="22">
                  <el-form-item style="margin-bottom: 40px;" label-width="100px" label="摘要:">
                    <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.description">
                    </el-input>
                    <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="22">
                  <el-form-item style="margin-bottom: 40px;" label-width="100px" label="彩币Logo:">
                    <VueImgInputer @onChange="logoUrl" v-model="postForm.logoUrl"  size="wallet" theme="material" ></VueImgInputer>
                  </el-form-item>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="21">
                  <el-button type="wallet" @click="submitForm()">确定</el-button>
                  <el-button type="cancel">取消</el-button>
                </el-col>
              </el-row>



            </div>
          </el-col>
        </el-row>


      </div>
    </el-form>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/singleImage3'
import VueImgInputer from 'vue-img-inputer'
import MDinput from '@/components/MDinput'
import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
import Sticky from '@/components/Sticky' // 粘性header组件
import { validateURL } from '@/utils/validate'
import { fetchArticle } from '@/api/article'
import { userSearch } from '@/api/remoteSearch'


export default {
  name: 'articleDetail',
  components: {
    Tinymce, MDinput, Upload, Multiselect, Sticky, VueImgInputer
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(null)
      } else {
        callback()
      }
    }
    const validateSourceUri = (rule, value, callback) => {
      if (value) {
        if (validateURL(value)) {
          callback()
        } else {
          this.$message({
            message: '外链url填写不正确',
            type: 'error'
          })
          callback(null)
        }
      } else {
        callback()
      }
    }
    return {
      postForm: {

        colorId       : "",//彩色币ID
        baseCoinType  : "",//@币（基础币）
        name          : "",//彩色币名称
        ename         : "",//英文名称
        shortName     : "",//彩色币简称
        issuingSubject: "",//发行主体
        baseAmount    : 0,//发行规模
        totalAmount   : 0,//发行量
        description   : "",//描述
        // idSeq         : "",//唯一标识
        logoUrl       : "",//LOGO图片url
        status        : 2,//状态 1：暂存 2：提交（待审核） 3：初审未通过 4：终止 5：初审通过 6：待终审 7：终生打回 8：终生通过
      },
      picValue: null,
      fetchSuccess: true,
      loading: false,
      drid: 'drid',
      drurl: 'drurl',
      userLIstOptions: [],
      platformsOptions: [
            { key: 'a-platform', name: 'a-platform' },
            { key: 'b-platform', name: 'b-platform' },
            { key: 'c-platform', name: 'c-platform' }
      ],
      rules: {
        colorId: [{ validator: validateRequire }],
        title: [{ validator: validateRequire }],
        content: [{ validator: validateRequire }],
        source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
      }
    }
  },
  computed: {
    contentShortLength() {
      return this.postForm.description.length
    },
    isEdit() {
      return this.$route.meta.isEdit // 根据meta判断
          // return this.$route.path.indexOf('edit') !== -1 // 根据路由判断
    }
  },
  created() {
     this.$http({
       url: '/api/v1/issue/user/login',
       method: 'post',
       body: {
         account: 'test',
         passwd: 'test'
       }
     }).then((res) => {
       console.log(res.data)
     })
    if (this.isEdit) {
      this.fetchData()
    }
  },
    methods: {
        logoUrl(file,fileName){
            let that = this;
            let reader = new FileReader();
            reader.onload = function(evt){
                let src   = evt.target.result;
                let params = {
                    fileName    : file.name,
                    fileData    : src,
                    modelName   : 'imgUpload'
                }
                console.log(params);
                that.$http({
                    url       :'/api/v1/issue/order/imgUpload',
                    method    :'post',
                    body      :params
                }).then((res)=>{
                    console.log(res.data);
                }).error((e)=>{
                    console.log(e);
                })
            }
            reader.readAsDataURL(file);
        },
        fetchData() {
            fetchArticle().then(response => {
                this.postForm = response.data
            }).catch(err => {
                this.fetchSuccess = false
                console.log(err)
            })
        },
    submitForm() {
      console.log(this.postForm)
      this.$refs.postForm.validate(valid => {

          /*this.loading = true
          this.$notify({
            title: '成功',
            message: '发布文章成功',
            type: 'success',
            duration: 2000
          })
          this.loading = false*/
      })
      this.$http({
          url   :'api/v1/issue/order/issueOrder',
          method:'post',
          body  :this.postForm
      }).then((res)=>{
          console.log(res.data);
      })
    },
    draftForm() {
      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
        this.$message({
          message: '请填写必要的标题和内容',
          type: 'warning'
        })
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success',
        showClose: true,
        duration: 1000
      })
      this.postForm.status = 'draft'
    },
    getRemoteUserList(query) {
      userSearch(query).then(response => {
        if (!response.data.items) return
        console.log(response)
        this.userLIstOptions = response.data.items.map(v => ({
          key: v.name
        }))
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top:10px;
    color:#ff4949;
  }
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>
